<template>
    <div id="Financial_Top">
        <div>
            <div>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>收支明细</el-breadcrumb-item>
                </el-breadcrumb>
                <!--        面包屑 end-->
                <!--        内容-->
                <el-card>
                    <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                             class="admin_from">
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.user_id" placeholder="请输入用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="searchForm.action" placeholder="请选择类型" clearable
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="注册奖励" value="1"></el-option>
                                <el-option label="签到奖励" value="2"></el-option>
                                <el-option label="阅读消耗" value="3"></el-option>
                                <el-option label="阅读奖励" value="4"></el-option>
                                <el-option label="充值奖励" value="5"></el-option>
                                <el-option label="邀请奖励" value="6"></el-option>
                                <el-option label="邀请好友充值奖励" value="7"></el-option>
                                <el-option label="观看广告" value="8"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="1">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="#">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="日期">
                        </el-table-column>
                        <el-table-column
                                width="210"
                                label="用户信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                                    <div>
                                        <p>{{scope.row.userInfo.id}}</p>
                                        <p>{{scope.row.userInfo.nickname}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="isyear"
                                label="类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.action==1">注册奖励</span>
                                <span v-if="scope.row.action==2">签到奖励</span>
                                <span v-if="scope.row.action==3">阅读消耗</span>
                                <span v-if="scope.row.action==4">阅读奖励</span>
                                <span v-if="scope.row.action==5">充值奖励</span>
                                <span v-if="scope.row.action==6">邀请奖励</span>
                                <span v-if="scope.row.action==7">邀请好友充值奖励</span>
                                <span v-if="scope.row.action==8">观看广告</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="value"
                                :label="this.$store.state.name">
                        </el-table-column>

                        <el-table-column
                                prop="type"
                                label="说明">
                        </el-table-column>
                    </el-table>
                    <div class="el-pagination">
                        <el-pagination
                                background
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="params.pagenum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="params.pagesize"
                                :layout="this.$store.state.paginationLayout"
                                :total="params.totals">
                        </el-pagination>
                    </div>

                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Financial_Top",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                searchForm: {
                    action: '',
                    user_id: '',
                    start_time: '',
                    end_time: '',
                },
                tableData: [],
                fromTitle: '',
                visible: false,
                imageUrl: ''
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    action: this.searchForm.action,
                    user_id: this.searchForm.user_id,
                    start_time: this.searchForm.start_time,
                    end_time: this.searchForm.end_time,
                };
                this.$axios.post("admin/finance/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }
        }
    }
</script>

<style scoped>

</style>